<%@ page import="databean.User"%>
<%@ page import="databean.Tokbox"%>
<%@ page import="java.util.ArrayList"%>
<jsp:include page="include-header.jsp"/>



<%
	User user = (User) request.getAttribute("user");
	Tokbox tokbox = (Tokbox) request.getAttribute("tokbox");
	String name = user.getFirstName() + " " + user.getLastName();
%>

	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <!-- <link href="samples.css" type="text/css" rel="stylesheet" > -->
	<script src="js/TB.min.js"></script>
	<script src="js/jquery.autoresize.js" type="text/javascript"></script>
	<script type="text/javascript" charset="utf-8">
	$(function() {
		$('textarea#messagebox2').autoResize({
		    // On resize:
		    onResize : function() {
		        $(this).css({opacity:0.8});
		    },
		    // After resize:
		    animateCallback : function() {
		        $(this).css({opacity:1});
		    },
		    // Quite slow animation:
		    animateDuration : 300,
		    // More extra space:
		    extraSpace : 10
		});
	});
	</script>
	
	
	<script type="text/javascript" charset="utf-8">


		//var apiKey = 1127; // OpenTok sample API key. Replace with your own API key.
		var apiKey = 3653831;
		
		//var sessionId = '153975e9d3ecce1d11baddd2c9d8d3c9d147df18'; // Replace with your session ID.
		var sessionId = "<%= tokbox.getSessionIDLocal() %>";
		
		var token = 'devtoken'; 
		
		// Should not be hard-coded.
								// Add to the page using the OpenTok server-side libraries.
		//var token = "${tokform.tokenPublisher}";							

		//var token = "${tokform.tokenSession}";
		//var token = "${tokform.tokenPublisher}";
		//var token = "${tokform.tokenSubscriber}";
		//var token = "${tokform.tokenModerator}";
		//var token = "${tokform.sessionID}";
		//var token = "${tokform.sessionIDLocal}";
		
		var session;
		var publisher;
		var subscribers = {};

		// Un-comment either of the following to set automatic logging and exception handling.
		// See the exceptionHandler() method below.
		// TB.setLogLevel(TB.DEBUG);
		TB.addEventListener("exception", exceptionHandler);

		if (TB.checkSystemRequirements() != TB.HAS_REQUIREMENTS) {
			alert("You don't have the minimum requirements to run this application."
				  + "Please upgrade to the latest version of Flash.");
		} else {
			session = TB.initSession(sessionId);	// Initialize session

			// Add event listeners to the session
			session.addEventListener('sessionConnected', sessionConnectedHandler);
			session.addEventListener('sessionDisconnected', sessionDisconnectedHandler);
			session.addEventListener('connectionCreated', connectionCreatedHandler);
			session.addEventListener('connectionDestroyed', connectionDestroyedHandler);
			session.addEventListener('streamCreated', streamCreatedHandler);
			session.addEventListener('streamDestroyed', streamDestroyedHandler);
		}

		//--------------------------------------
		//  LINK CLICK HANDLERS
		//--------------------------------------

		/*
		If testing the app from the desktop, be sure to check the Flash Player Global Security setting
		to allow the page from communicating with SWF content loaded from the web. For more information,
		see http://www.tokbox.com/opentok/build/tutorials/helloworld.html#localTest
		*/
		//session.connect(apiKey, token); //testing to see if it initializes
		session.connect(apiKey, token);
		
		
		function connect() {
			session.connect(apiKey, token);
		}

		function disconnect() {
			session.disconnect();
			show('connectLink');
			hide('disconnectLink');
			hide('publishLink');
			hide('unpublishLink');
		}

		// Called when user wants to start publishing to the session
		function startPublishing() {
			if (!publisher) {
				var parentDiv = document.getElementById("myCamera");
				var publisherDiv = document.createElement('div'); // Create a div for the publisher to replace
				publisherDiv.setAttribute('id', 'opentok_publisher');
				parentDiv.appendChild(publisherDiv);
				publisher = session.publish(publisherDiv.id); // Pass the replacement div id to the publish method
				show('unpublishLink');
				hide('publishLink');
			}
		}

		function stopPublishing() {
			if (publisher) {
				session.unpublish(publisher);
			}
			publisher = null;

			show('publishLink');
			hide('unpublishLink');
		}

		//--------------------------------------
		//  OPENTOK EVENT HANDLERS
		//--------------------------------------

		function sessionConnectedHandler(event) {
			// Subscribe to all streams currently in the Session
			for (var i = 0; i < event.streams.length; i++) {
				addStream(event.streams[i]);
				
				
			}
			//alert("IN sessionConnectedHandler");
			show('disconnectLink');
			show('publishLink');
			hide('connectLink');
		}

		function streamCreatedHandler(event) {
			// Subscribe to the newly created streams
			for (var i = 0; i < event.streams.length; i++) {
				addStream(event.streams[i]);
			
			}
		}

		function streamDestroyedHandler(event) {
			// This signals that a stream was destroyed. Any Subscribers will automatically be removed.
			// This default behaviour can be prevented using event.preventDefault()
		}

		function sessionDisconnectedHandler(event) {
			// This signals that the user was disconnected from the Session. Any subscribers and publishers
			// will automatically be removed. This default behaviour can be prevented using event.preventDefault()
			publisher = null;

			show('connectLink');
			hide('disconnectLink');
			hide('publishLink');
			hide('unpublishLink');
		}

		function connectionDestroyedHandler(event) {
			// This signals that connections were destroyed
		}

		function connectionCreatedHandler(event) {
			// This signals new connections have been created.
		}

		/*
		If you un-comment the call to TB.addEventListener("exception", exceptionHandler) above, OpenTok calls the
		exceptionHandler() method when exception events occur. You can modify this method to further process exception events.
		If you un-comment the call to TB.setLogLevel(), above, OpenTok automatically displays exception event messages.
		*/
		function exceptionHandler(event) {
			alert("Exception: " + event.code + "::" + event.message);
		}

		//--------------------------------------
		//  HELPER METHODS
		//--------------------------------------

		function addStream(stream) {
			// Check if this is the stream that I am publishing, and if so do not publish.
			if (stream.connection.connectionId == session.connection.connectionId) {
				return;
			}
			var subscriberDiv = document.createElement('div'); // Create a div for the subscriber to replace
			subscriberDiv.setAttribute('id', stream.streamId); // Give the replacement div the id of the stream as its id.
			subscriberDiv.className = "subscriberBox";
			document.getElementById("subscribers").appendChild(subscriberDiv);
			
			subscribers[stream.streamId] = session.subscribe(stream, subscriberDiv.id);
		}

		function show(id) {
			document.getElementById(id).style.display = 'block';
		}

		function hide(id) {
			document.getElementById(id).style.display = 'none';
		}

	</script>
<div id="content" class="full_column">
	<div id="content_header">Conference Room</div>
	
	<div id="left_inner" style="width: 26%">
	<h4>Conference Control Panel</h4>
	<div id="content_padded">
	<div id="myCamera" class="publisherContainer">
		<a href="#" class="awesome orange medium" id="publishLink" onClick="javascript:startPublishing()"><img src="images/iconset/TV.png" width="32px" height="32px"/><br>Start Web Camera</a>
	</div>
	</div>
	<div id="content_padded" style="padding-bottom: 0px; padding-top: 0px; line-height: 2em;">
		<div id="links">
	       	<a href="#" class="awesome blue small" style="margin-bottom: 2px;" id ="unpublishLink" onClick="javascript:stopPublishing()">Disable Web Camera</a>
	      	<a href="video-existing-confs.do" class="awesome blue small" style="margin-bottom: 2px;" id ="disconnectLink">Leave the Conference</a>
		</div>
	</div>
	<div id="content_padded">
		<div id="profileInfo_details" style="">
		<div id="opentok_console"></div>
		<h4>Notes</h4>
		
		<%
			if (user.getUserID()==Long.parseLong(tokbox.getNoteTakerID())) {
		%>
			<form method="post" action="video-save-conf-notes.do">
			  <p>
			    <label>
			      <input type="hidden" name="confName" id="confName" value="<%= tokbox.getConfName() %>" />
			    </label>
			  </p>
			  
			 <span class="w">
					<textarea class="input" name="notes" id="messagebox2" placeholder="Space for your notes..." style="width: 97%; padding: 2px;"><%= tokbox.getNotes() %></textarea>
			 </span>
			 <p>
			 <input style="width:100%" type="submit"  name="button" id="button" value="Save Notes & Exit" />
			 </p>
			</form>
		<%
			} else {
		%>
			<p>
			    <label><%= tokbox.getNotes() %></textarea>
			    </label>
			</p>
		<%
			}
		%>
		</div>
	</div>
	</div>
	<div id="right_inner" style="width: 73%;">
	<h4>Participants Viewport</h4>
		
	<div id="content_padded">
		
		<div id="subscribers"></div>
	</div>
	</div>
	
</div>
	<script>
		/* show('connectLink'); */
		hide('disconnectLink');
		hide('publishLink');
		hide('unpublishLink');
	</script>


<jsp:include page="include-footer.jsp"/>